<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { ElForm } from 'element-plus'

const searchForm = reactive({
  name: '',
  realname: '',
  cellphone: '',
  enable: 1,
  createAt: []
})

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
// if(tableData.length<100){
for (let i = 0; i < 100; i++) {
  tableData.push({
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  })
}
// }

// 重置操作
const formRef = ref<InstanceType<typeof ElForm>>()
function handleResetClick() {
  formRef.value?.resetFields()
}

function handleQueryClick() {
  console.log('handleQueryClick')
}
</script>

<template>
  <div class="user-wrapper">
    <div class="search">
      <!-- 1.输入搜索关键字的表单 -->
      <el-form :model="searchForm" ref="formRef" label-width="80px" size="large">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="用户名" prop="name">
              <el-input v-model="searchForm.name" placeholder="请输入查询的用户名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="真实姓名" prop="realname">
              <el-input v-model="searchForm.realname" placeholder="请输入查询的真实姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码" prop="cellphone">
              <el-input v-model="searchForm.cellphone" placeholder="请输入查询的手机号码" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="状态" prop="enable">
              <el-select
                v-model="searchForm.enable"
                placeholder="请选择查询的状态"
                style="width: 100%"
              >
                <el-option label="启用" :value="1" />
                <el-option label="禁用" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间" prop="createAt">
              <el-date-picker
                v-model="searchForm.createAt"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 2.重置和搜索的按钮 -->
      <div class="btns">
        <el-button icon="Refresh" @click="handleResetClick">重置</el-button>
        <el-button icon="Search" type="primary" @click="handleQueryClick">查询</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        border
        height="100%"
        style="width: 100%"
        header-cell-class-name="header-cell"
      >
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
  </div>
</template>


<style lang="less" scoped>
.user-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .search {
    background-color: #fff;
    padding: 20px;

    .el-form-item {
      padding: 20px 30px;
      margin-bottom: 0;
    }

    .btns {
      text-align: right;
      padding: 0 50px 10px 0;

      .el-button {
        height: 36px;
      }
    }
  }
  .content {
    padding: 20px;
    background-color: #fff;

    overflow: hidden;
    flex: 1;
  }
}
</style>
